import React from "react";
import "./index.css";
import { Slider } from 'antd';


export default function ReaderSetting(props) {
    const { theme, setTheme, showSetting, setFontFamily, setFontSize, setParaStyle } = props;
    function sliderOnChange(value) {
        console.log(value);
        // console.log({ value });
        setFontSize(value);
    }
    const marks = {
        12: '12',
        18: '18',
        24: '24',
        30: '30',
        36: '36',
      };
    // function formatter(value) {
    //     return `${value}`;
    //     }
    // // console.log(props);

    // const isShow = 'hidden';
    // if (showSetting) isShow = '';
    return (
        <div className={(!showSetting? 'hidden': '' )+' readerSetting '+theme}>
            <ul>
                <li className="themeList">
                    <span className="optionsName">主题</span>
                    <span className="optionsList">
                        <span className="Btn" onClick={() => setTheme('normal') }>🌝</span>
                        <span className="Btn" onClick={() => setTheme('night')}>🌑</span>
                        <span className="Btn" onClick={() => setTheme('green')}>👀</span>
                    </span>
                </li>
                <li className="fontFamily">
                    <span className="optionsName">字体</span>
                    <span className="optionsList">
                    <span className="Btn" onClick={() => setFontFamily('SimHei')}>黑体</span>
                    <span className="Btn" onClick={() => setFontFamily('SimSun')}>宋体</span>
                        <span className="Btn" onClick={() => setFontFamily('KaiTi')}>楷体</span>
                        </span>
                </li>
                <li className="fontSize">
                    <span className="optionsName">字号</span>
                    <span className="optionsList">
                    {/* <span className="Btn" onClick={() => setFontSize('small')}>小</span>
                    <span className="Btn" onClick={() => setFontSize('medium')}>中</span>
                    <span className="Btn" onClick={() => setFontSize('large')}>大</span> */}
                    <Slider className={'fontSlider'} min={12} max={36} onAfterChange={sliderOnChange} marks={marks} defaultValue={24}/>
                    {/* <Slider tipFormatter={null} /> */}
                    </span>


                {/* ReactDOM.render(
                <>

                </>,
                mountNode,
                    );
                     */}

                </li>
                <li className="paraStyle">
                    <span className="optionsName">段落</span>
                    <span className="optionsList">
                    <span className="Btn" onClick={() => setParaStyle('slim')}>紧凑</span>
                    <span className="Btn" onClick={() => setParaStyle('well')}>适中</span>
                        <span className="Btn" onClick={() => setParaStyle('loose')}>宽松</span>
                        </span>
                </li>
            </ul>
        </div>
    )
}